<template>
    <div class="header">
        <h1>这是Header组件</h1>
        <!--    通过router-link来切换路由-->
        <router-link to="/">首页</router-link>
        <!--    <router-link to="/product">商品</router-link>-->
        <!--        <router-link :to="'/product'">商品</router-link>-->
        <router-link :to="{path:'/product',query:{proName:'秋裤',proPrice:0.9}}">商品</router-link>
        <!--        使用router来切换路由  通过js的方式切换路由-->
        <button @click="toPro('/product','冬天的第一个雪糕','999')">商品</button>
        <button @click="toPro('/')">首页</button>
        <router-link :to="{name:'c',params:{id:'666',num:1000,price:2000}}">购物车</router-link>
        <button @click="toCart">go</button>
        <!--        个人信息-->
        <router-link :to="'/mine'">个人信息</router-link>
        <!--        新闻组件-->
        <router-link :to="'/news'">新闻组件</router-link>
    </div>
</template>

<script>
    export default {
        name: "Header",
        methods: {
            toPro(a, b, c) {
                this.$router.push({path: a, query: {proName: b, proPrice: c}})
            },
            toCart() {
                this.$router.push({name: 'c', params: {id: '99', num: 10, price: 209}}).catch(() => {
                });
            }

        },

    }
</script>
<!--scoped属性 可以让当前style标签里面的css样式只对当前组件模板有效果-->
<style scoped>
    .header {
        height: 200px;
        width: 100%;
        background-color: aliceblue;
        text-align: center;
    }

    .header h1 {
        padding: 20px;
    }

    .header a {
        color: black;
        margin: 20px 30px;
    }
</style>